<template>
  <div class="login">
    <div class="nav">
      <img src="./logo.png" />
      <div></div>
      <img src="./招采平台系统.png" />
    </div>
    <div class="panel" v-if="upLoginMode">
      <div class="top"></div>
      <div class="panel-tab" @click="changeLoginMode()">
        <img class="panel-tab-icon" src="./手机.png" />
      </div>
      <div class="title">采购与供应商管理系统</div>
      <div class="title1">供应商入口</div>
      <div class="inputGroup">
        <div class="inputLine">
          <img src="./用户.png" />
          <a-input
            :placeholder="
              languages === 'zh'
                ? '请输入账号'
                : 'Please enter the account number'
            "
            autocomplete="off"
            style="width: 280px; height: 48px; padding: 16px; font-size: 16px"
            v-model="loginData.user"
          ></a-input>
        </div>
        <div class="inputLine">
          <img src="./密码.png" />

          <a-input
            :placeholder="
              languages === 'zh' ? '请输入密码' : 'Please enter the password'
            "
            autocomplete="off"
            style="width: 280px; height: 48px; padding: 16px; font-size: 16px"
            v-model="loginData.pwd"
            :type="passwordType"
          >
          </a-input>
        </div>
        <i
          class="icon aufontAll"
          :class="{
            'rightbutton h-icon-all-eye-close': !showPassword,
            'rightbutton h-icon-all-eye-o': showPassword,
          }"
          slot="suffix"
          @click="passwordVisible"
        ></i>
      </div>
      <div class="LoginGroup">
        <button @click="login()">登　录</button>
      </div>
      <div class="btnGroup">
        <a href="javascript: void(0);" @click="regist()" style="color: #63696f"
          >注册账号</a
        >
        <a href="javascript: void(0);" @click="forget()" style="color: #4683eb"
          >忘记密码?</a
        >
        <a
          href="javascript: void(0);"
          @click="changeLoginMode()"
          style="color: #63696f"
          >短信登录</a
        >
      </div>
    </div>
    <div class="panel" v-else>
      <div class="top"></div>
      <div class="panel-tab" @click="changeLoginMode()">
        <img class="panel-tab-icon" src="./用户1.png" />
      </div>
      <div class="title">采购与供应商管理系统</div>
      <div class="title1">供应商入口</div>
      <div class="inputGroup">
        <div class="inputLine">
          <img src="./手机1.png" />
          <a-input
            :placeholder="
              languages === 'zh' ? '请输入手机号' : 'Please enter the mobile'
            "
            autocomplete="off"
            style="width: 280px; height: 48px; padding: 16px; font-size: 16px"
            v-model="loginData.mobile"
          ></a-input>
        </div>
        <div class="inputLine">
          <img src="./验证码.png" />

          <a-input
            :placeholder="
              languages === 'zh'
                ? '请输入验证码'
                : 'Please enter the check code'
            "
            autocomplete="off"
            style="width: 160px; height: 48px; padding: 16px; font-size: 16px"
            v-model="loginData.checkCode"
          >
          </a-input>
          <button
            v-if="loginTxt == 0"
            class="inputLine-getCode"
            @click="getLoginCheckCode()"
          >
            <span style="">获取验证码</span>
          </button>
          <button
            v-else
            class="inputLine-getCode"
            style="color: #ccc; background-color: #eee"
          >
            <span style="">{{ loginTxt }}</span>
          </button>
        </div>
      </div>
      <div class="LoginGroup">
        <button @click="loginCheckCode()">登　录</button>
      </div>
      <div class="btnGroup">
        <a href="javascript: void(0);" @click="regist()" style="color: #63696f"
          >注册账号</a
        >
        <a
          href="javascript: void(0);"
          @click="changeLoginMode()"
          style="color: #63696f"
          >密码登录</a
        >
      </div>
    </div>
    <div class="footer">
      此方案为奥哲网络科技有限公司设计版权所有，不得抄袭违者必究
    </div>

    <a-modal
      :title="languages === 'zh' ? '注册' : 'Registered'"
      :bodyStyle="{ 'text-align': 'center' }"
      width="660px"
      v-model="registVisiable"
      :maskClosable="false"
      :okText="'注册'"
      @ok="registDone"
    >
      <template>
        <table class="regist-table">
          <colgroup>
            <col style="width: 120px" />
            <col />
          </colgroup>
          <tr>
            <td>
              <div class="regist-table-title">
                <span class="regist-table-title-mast">*</span>
                供应商名称:
              </div>
            </td>
            <td>
              <div class="regist-table-content">
                <a-input
                  v-model="registData.name"
                  :placeholder="'请输入'"
                  class="regist-table-content-input"
                ></a-input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="regist-table-title">
                <span class="regist-table-title-mast">*</span>
                联系人:
              </div>
            </td>
            <td>
              <div class="regist-table-content">
                <a-input
                  v-model="registData.contactor"
                  :placeholder="'请输入'"
                  class="regist-table-content-input"
                ></a-input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="regist-table-title">
                <span class="regist-table-title-mast">*</span>
                手机号:
              </div>
            </td>
            <td>
              <div class="regist-table-content">
                <a-input
                  v-model="registData.mobile"
                  :placeholder="'请输入'"
                  class="regist-table-content-input"
                ></a-input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="regist-table-title">行业类型:</div>
            </td>
            <td>
              <div class="regist-table-content">
                <a-select
                  v-model="registData.industryType"
                  :placeholder="'请选择'"
                >
                  <a-select-option
                    v-for="(item, index) in IndustryType"
                    :value="item.key"
                    :key="index"
                    :title="item.text"
                    >{{ item.text }}</a-select-option
                  >
                </a-select>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="regist-table-title">
                <span class="regist-table-title-mast">*</span>
                验证码:
              </div>
            </td>
            <td>
              <div class="regist-table-content">
                <div class="regist-table-content-checkcode">
                  <a-input
                    v-model="registData.checkCode"
                    :placeholder="'请输入'"
                    class="regist-table-content-checkcode-input"
                  ></a-input>
                  <button
                    v-if="registTxt == 0"
                    class="regist-table-content-checkcode-getCode"
                    @click="getCheckCode()"
                  >
                    获取验证码
                  </button>
                  <button
                    v-else
                    class="regist-table-content-checkcode-getCode"
                    style="color: #ccc; background-color: #eee"
                  >
                    {{ registTxt }}
                  </button>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="regist-table-title">
                <span class="regist-table-title-mast">*</span>
                登录密码:
              </div>
            </td>
            <td>
              <div class="regist-table-content">
                <div class="regist-table-content-checkcode">
                  <a-input
                    :placeholder="
                      languages === 'zh'
                        ? '请输入密码'
                        : 'Please enter the password'
                    "
                    autocomplete="off"
                    v-model="registData.pwd"
                    :type="'password'"
                  >
                  </a-input>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="regist-table-title">
                <span class="regist-table-title-mast">*</span>
                确认密码:
              </div>
            </td>
            <td>
              <div class="regist-table-content">
                <div class="regist-table-content-checkcode">
                  <a-input
                    :placeholder="
                      languages === 'zh'
                        ? '请输入密码'
                        : 'Please enter the password'
                    "
                    autocomplete="off"
                    v-model="registData.pwd2"
                    :type="'password'"
                  >
                  </a-input>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </template>
    </a-modal>

    <a-modal
      :title="languages === 'zh' ? '找回密码' : 'Find Password'"
      :bodyStyle="{ 'text-align': 'center' }"
      width="660px"
      v-model="findVisiable"
      :maskClosable="false"
      :okText="'找回'"
      @ok="findDone"
    >
      <template>
        <table class="find-table">
          <colgroup>
            <col style="width: 120px" />
            <col />
          </colgroup>
          <tr style="display: none;">
            <td>
              <div class="find-table-title">
                <span class="find-table-title-mast">*</span>
                供应商名称:
              </div>
            </td>
            <td>
              <div class="find-table-content">
                <a-input
                  v-model="findData.name"
                  :placeholder="'请输入'"
                  class="find-table-content-input"
                ></a-input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="find-table-title">
                <span class="find-table-title-mast">*</span>
                手机号:
              </div>
            </td>
            <td>
              <div class="find-table-content">
                <a-input
                  v-model="findData.mobile"
                  :placeholder="'请输入'"
                  class="find-table-content-input"
                ></a-input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="find-table-title">
                <span class="find-table-title-mast">*</span>
                验证码:
              </div>
            </td>
            <td>
              <div class="find-table-content">
                <div class="find-table-content-checkcode">
                  <a-input
                    v-model="findData.checkCode"
                    :placeholder="'请输入'"
                    class="find-table-content-checkcode-input"
                  ></a-input>
                  <button
                    v-if="findTxt == 0"
                    class="find-table-content-checkcode-getCode"
                    @click="getCheckCode2()"
                  >
                    获取验证码
                  </button>
                  <button
                    v-else
                    class="find-table-content-checkcode-getCode"
                    style="color: #ccc; background-color: #eee"
                  >
                    {{ findTxt }}
                  </button>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="find-table-title">
                <span class="find-table-title-mast">*</span>
                新密码:
              </div>
            </td>
            <td>
              <div class="find-table-content">
                <a-input
                  v-model="findData.pwd"
                  :placeholder="'请输入'"
                  class="find-table-content-input"
                ></a-input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="find-table-title">
                <span class="find-table-title-mast">*</span>
                确认新密码:
              </div>
            </td>
            <td>
              <div class="find-table-content">
                <a-input
                  v-model="findData.pwd2"
                  :placeholder="'请输入'"
                  class="find-table-content-input"
                ></a-input>
              </div>
            </td>
          </tr>
        </table>
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, PropSync, Watch } from "vue-property-decorator";
import OAuthApi from "@/apis/oauth";
import env from "@/config/env";
import common from "@cloudpivot/common";
import Axios from "axios";
import { homeApi, userApi } from "@cloudpivot/api";
import { Modal, Input, Select, Button, Tooltip } from "@h3/antd-vue";
import axios from "axios";

@Component({
  name: "Login",
  components: {
    AInput: Input,
    AModal: Modal,
    ASelect: Select,
    ASelectOption: Select.Option,
  },
})
export default class Login extends Vue {
  loginData = {
    user: "",
    pwd: "",
    mobile: "",
    checkCode: "",
  };
  upLoginMode: boolean = true;
  showPassword: boolean = false;
  passwordType: string = "password";
  languages: string = localStorage.getItem("locale") || "zh";
  redirectUrl: string = ""; // 登录回跳地址
  corpId: string = "";
  registTxt: number = 0;
  loginTxt: number = 0;
  findTxt: number = 0;
  redirect_uril: string = ""; // 后端需要
  urlForToken: string = ""; // 后端需要
  client_secret: string = ""; // 后端需要
  client_id: string = ""; // 后端需要

  registData = {
    name: "",
    contactor: "",
    mobile: "",
    industryType: "",
    checkCode: "",
    pwd: "",
    pwd2: "",
  };

  IndustryType = [
    {
      key: "原辅料类",
      text: "原辅料类",
    },
    {
      key: "包材类",
      text: "包材类",
    },
    {
      key: "易制毒易制爆剧毒品类",
      text: "易制毒易制爆剧毒品类",
    },
    {
      key: "设备类",
      text: "设备类",
    },
    {
      key: "工程类",
      text: "工程类",
    },
    {
      key: "信息服务类",
      text: "信息服务类",
    },
    {
      key: "研发服务类",
      text: "研发服务类",
    },
    {
      key: "安保服务类",
      text: "安保服务类",
    },
  ];

  registVisiable: boolean = false;

  findData = {
    name: "",
    mobile: "",
    checkCode: "",
    pwd: "",
    pwd2: "",
  };

  findVisiable: boolean = false;

  changeLoginMode() {
    this.upLoginMode = !this.upLoginMode;
  }

  async loginCheckCode() {
    if (!this.loginData.mobile || !this.loginData.checkCode) {
      alert("请完整输入手机号/验证码");
      return;
    }
    // rsa加密
    const result = await OAuthApi.getRsaKey();
    const flag: boolean =
      typeof result === "object" &&
      result.hasOwnProperty("index") &&
      result.hasOwnProperty("key");
    if (!flag) {
      return;
    }
    const { index, key } = result;

    const params = {
      type: "code",
      username: this.loginData.mobile,
      authcode: this.loginData.checkCode,
      url: this.redirectUrl,
      portal: true,
      index,
      corpId: this.corpId,
      mobile: this.loginData.mobile,
    };
    await axios
      .get(
        "/api/login/supplier?code="+this.loginData.mobile+"_" + this.loginData.checkCode
      )
      .then((res: any) => {
          debugger
        if (res.errcode === 0) {
          const token = res.access_token;
          const refresh_tokens = res.refresh_token;
          const expireTime = res.expiration;
          const isAdmin = res.userinfo.name === "admin";
          localStorage.setItem("refresh_token", refresh_tokens);
          localStorage.setItem("expireTime", expireTime);
          localStorage.setItem("token", token);
          localStorage.setItem("_isAdmin", isAdmin + "");
          this.$router
            .push({
              path: "/application/ZhaoCaiXiTong/homeZC?parentId=8aeec3a67accb868017ad1d30c911b88&code=ZhaocaiHome&openMode=VUE_MODE&pcUrl=%2Fapplication%2FZhaoCaiXiTong%2FhomeZC&queryCode=",
            })
            .catch((err: any) => {
              err;
            });
        } else {
          alert(res.errmsg);
        }
      });
  }

  loginCheckCodeTimer() {
    this.loginTxt = 60;
    var that = this;
    var i = setInterval(function () {
      that.loginTxt--;
      if (that.loginTxt == 0) {
        clearInterval(i);
      }
    }, 1000);
  }

  findCheckCodeTimer() {
    this.findTxt = 60;
    var that = this;
    var i = setInterval(function () {
      that.findTxt--;
      if (that.findTxt == 0) {
        clearInterval(i);
      }
    }, 1000);
  }

  getLoginCheckCode() {
    var that = this;
    if (this.loginData.mobile) {
      axios
        .get(
          "/login/sendSMSCode?phone=" +
            this.loginData.mobile
        )
        .then((res: any) => {
          if (res.errcode == 0) {
            that.loginCheckCodeTimer();
            alert("发送验证码成功");
          } else {
            alert(res.errmsg);
          }
        });
    } else {
      alert("请输入手机号");
    }
  }

  passwordVisible() {
    if (this.showPassword) {
      this.passwordType = "password";
    } else {
      this.passwordType = "text";
    }
    this.showPassword = !this.showPassword;
  }

  async login() {
    debugger
    if (!this.loginData.user || !this.loginData.pwd) {
      alert("请完整输入用户名/密码");
      return;
    }
    // rsa加密
    const result = await OAuthApi.getRsaKey();
    const flag: boolean =
      typeof result === "object" &&
      result.hasOwnProperty("index") &&
      result.hasOwnProperty("key");
    if (!flag) {
      return;
    }
    const { index, key } = result;
    const password: any = common.utils.RsaEncrypt(this.loginData.pwd, key);

    const params = {
      username: this.loginData.user,
      password: password,
      url: this.redirectUrl,
      portal: true,
      index,
      corpId: this.corpId,
      mwPassword: this.loginData.pwd,
      mobile: this.loginData.user,
      redirect_uri:this.redirect_uril,
      urlForToken:this.urlForToken,
      client_secret:this.client_secret,
      client_id:this.client_id,
    };

    await axios
      .post(
        "/api/zcxtHomePage/userloginForMobile",
        params
      )
      .then((res: any) => {
        if (res.errcode === 0) {
          const token = (res.data as any).access_token;
          const refresh_tokens = (res.data as any).refresh_token;
          const expireTime = (res.data as any).exp;
          const isAdmin = (res.data as any).user_name === "admin";
          localStorage.setItem("refresh_token", refresh_tokens);
          localStorage.setItem("expireTime", expireTime);
          localStorage.setItem("token", token);
          localStorage.setItem("_isAdmin", isAdmin + "");
          this.$router
            .push({
              path: "/application/ZhaoCaiXiTong/homeZC?parentId=8aeec3a67accb868017ad1d30c911b88&code=ZhaocaiHome&openMode=VUE_MODE&pcUrl=%2Fapplication%2FZhaoCaiXiTong%2FhomeZC&queryCode=",
            })
            .catch((err: any) => {
              err;
            });
        } else {
          alert(res.errmsg);
        }
      });
  }

  regist() {
    this.registData = {
      name: "",
      contactor: "",
      mobile: "",
      industryType: "",
      checkCode: "",
      pwd: "",
      pwd2: "",
    };
    this.registVisiable = true;
  }

  forget() {
    this.findVisiable = true;
  }

  async registDone() {
    if (!this.registData.pwd || !this.registData.pwd2) {
      alert("请输入密码");
      return;
    }
    if (this.registData.pwd != this.registData.pwd2) {
      alert("两次密码不一致");
      return;
    }
    var that = this;
    if (this.registData.mobile) {
      if (this.registData.checkCode) {
        await axios
          .get(
            "/login/validateSMSCode?phone=" +
              this.registData.mobile +
              "&authcode=" +
              this.registData.checkCode
          )
          .then(async (res: any) => {
            if (res.errcode == 0) {
              await axios
                .post("/login/addSupplierUser", {
                  mobile: that.registData.mobile,
                  authcode: that.registData.checkCode,
                  password: that.registData.pwd,
                  username: that.registData.contactor,
                  yh_name: that.registData.name,
                  ftype: that.registData.industryType,
                })
                .then((res: any) => {
                  if (res.errcode == 0) {
                    alert("注册成功");
                    this.registVisiable = false;
                  } else {
                    alert(res.errmsg);
                  }
                });
            } else {
              alert(res.errmsg);
            }
          });
      } else {
        alert("请输入验证码");
      }
    } else {
      alert("请输入手机号");
    }
  }

  async findDone() {
    if (!this.findData.mobile) {
      alert("请输入手机号");
      return;
    }
    if (!this.findData.checkCode) {
      alert("请输入验证码");
      return;
    }
      
    if (!this.findData.pwd || !this.findData.pwd2) {
      alert("请输入密码");
      return;
    }
    if (this.findData.pwd != this.findData.pwd2) {
      alert("两次密码不一致");
      return;
    }
    await axios
      .post(
        "/login/updateSupplierPassword",
        {
            mobile: this.findData.mobile,
            authcode: this.findData.checkCode,
            password: this.findData.pwd
        }
      )
      .then(async (res: any) => {
        if (res.errcode === 0) {
          alert('密码已成功找回');
          this.findVisiable = false;
        } else {
          alert(res.errmsg);
        }
      });
  }

  CheckCodeTimer() {
    this.registTxt = 60;
    var that = this;
    var i = setInterval(function () {
      that.registTxt--;
      if (that.registTxt == 0) {
        clearInterval(i);
      }
    }, 1000);
  }

  getCheckCode() {
    var that = this;
    if (this.registData.mobile) {
      axios
        .get(
          "/login/sendSMSCode?phone=" +
            this.registData.mobile
        )
        .then((res: any) => {
          if (res.errcode == 0) {
            that.CheckCodeTimer();
            alert("发送验证码成功");
          } else {
            alert(res.errmsg);
          }
        });
    } else {
      alert("请输入手机号");
    }
  }

  getCheckCode2() {
    var that = this;
    if (this.findData.mobile) {
      axios
        .get(
          "/login/sendSMSCode?phone=" +
            this.findData.mobile
        )
        .then((res: any) => {
          if (res.errcode == 0) {
            that.findCheckCodeTimer();
            alert("发送验证码成功");
          } else {
            alert(res.errmsg);
          }
        });
    } else {
      alert("请输入手机号");
    }
  }

  async created() {
    const res: any = await OAuthApi.getDepts();
    if (res.errcode !== 0) {
      this.$message.error(res.errmsg);
      return;
    }
    
    const { oauthHost, client_id, scope, secret, redirectHost } = env;
    this.corpId = res.data[0].corpId;
    // debugger;
    // 回跳地址
    this.redirectUrl = `${oauthHost}/login?redirect_uri=${encodeURIComponent(
      `${oauthHost}/oauth/authorize?client_id=${client_id}&response_type=code&scope=${scope}&redirect_uri=${redirectHost}/oauth`
    )}`;
    this.urlForToken=`${oauthHost}/`;
     this.redirect_uril=`${redirectHost}/oauth`;
     this.client_secret=`${secret}`;
     this.client_id=`${client_id}`;
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url("./背景.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .nav {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    height: 64px;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0 10px 50px;

    img {
      height: 42px;
    }

    div {
      height: 24px;
      width: 1px;
      background-color: #fff;
      display: inline-block;
      margin: 0 10px;
    }
  }
  .panel {
    width: 365px;
    height: 422px;
    box-shadow: 0px 6px 22px 0px #dfe6fd;
    background: #ffffff;

    .panel-tab {
      display: none;
      width: 0;
      height: 0;
      border-color: transparent #5370ef;
      border-style: solid;
      border-width: 0 0 50px 50px;
      position: relative;
      z-index: 100;

      .panel-tab-icon {
        width: 30px;
        height: 30px;
        margin-left: -50px;
      }
    }

    .top {
      width: 365px;
      height: 6px;
      opacity: 1;
      background: linear-gradient(270deg, #5686ff, #5370ef);
    }
    .title {
      //margin-top: -50px;
      width: 100%;
      height: 60px;
      opacity: 0.98;
      font-size: 28px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #63696f;
      line-height: 40px;
      letter-spacing: 2px;
    }
    .title1 {
      //margin-top: -50px;
      width: 100%;
      height: 46px;
      opacity: 0.98;
      font-size: 20px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #63696f;
      line-height: 40px;
      letter-spacing: 2px;
    }
    .inputGroup {
      padding: 16px 0;
      .inputLine {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 68px;
        padding: 10px 20px;
        img {
          width: 24px;
          height: 24px;
        }
        .inputLine-getCode {
          width: 100px;
          background-color: #fff;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          color: #4683eb;
          cursor: pointer;
          padding: 4px 0px;
          font-size: 14px;
          height: 48px;
        }
      }
      .rightbutton {
        position: relative;
        right: -320px;
        top: -45px;
      }
    }
    .LoginGroup {
      padding: 10px 20px;

      button {
        width: 100%;
        height: 48px;
        background-color: #5686ff;
        border-radius: 4px;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
      button:hover {
        background-color: #4676ee;
      }
      button:active {
        background-color: #3666dd;
      }
    }
    .btnGroup {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
  }
  .footer {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    opacity: 0.5;
    font-size: 13px;
    color: #fff;
  }
}
.regist-table {
  width: 100%;
}
.regist-table-title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 7px;

  .regist-table-title-mast {
    color: #f22;
  }
}
.regist-table-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 7px;

  .regist-table-content-input {
    width: 100%;
  }

  .regist-table-content-checkcode {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;

    .regist-table-content-checkcode-input {
      width: calc(100% - 94px);
    }
    .regist-table-content-checkcode-getCode {
      width: 94px;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      color: #4683eb;
      cursor: pointer;
      padding: 4px 0px;
      font-size: 16px;
    }
  }
}
.ant-select {
  width: 100% !important;
}

.find-table {
  width: 100%;
}
.find-table-title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 7px;

  .find-table-title-mast {
    color: #f22;
  }
}
.find-table-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 7px;

  .find-table-content-input {
    width: 100%;
  }

  .find-table-content-checkcode {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;

    .find-table-content-checkcode-input {
      width: calc(100% - 94px);
    }
    .find-table-content-checkcode-getCode {
      width: 94px;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      color: #4683eb;
      cursor: pointer;
      padding: 4px 0px;
      font-size: 16px;
    }
  }
}
</style>